<template>
  <el-drawer
    v-model="drawerVisible"
    :size="650"
    :title="title"
    @closed="$emit('closed')"
    append-to-body
  >
    <el-container v-loading="saveLoading">
      <el-main>
            <el-tree
              ref="treeList"
              class="treeList"
              node-key="id"
              :data="menuList"
              :props="menuProps"
              highlight-current
              :expand-on-click-node="false"
              default-expand-all="true"
              :filter-node-method="menuFilterNode"
              show-checkbox
              :default-expanded-keys="selection"
              @check="checkedKeys"
              @node-click="handleNodeClick"
              @setCurrentKey="setCurrentKey"
            >
              <template #default="{ node }">
                <span class="custom-tree-node el-tree-node__label">
                  <span class="label">
                    {{ node.label }}
                  </span>
                </span>
              </template>
            </el-tree>
      </el-main>
      <el-footer>
        <div class="form-footer">
          <el-button type="" @click="close">取消</el-button>
          <el-button type="primary" @click="submit">提交</el-button>
        </div>
      </el-footer>
    </el-container>
  </el-drawer>
</template>

<script>
export default {
  name: "rights-save",
  emits: ["success", "closed"],
  data() {
    return {
      saveLoading: false,
      drawerVisible: false,
      mode: "add",
      title: "权限设置",
      tip: "添加成功",
      form: {
        id: "",
      },
      rules: {
        roleName: [{ required: true, message: "请输入部门名称" }],
        dataScope: [{ required: true, message: "请输入数据范围" }],
        status: [{ required: true, message: "请输入状态" }],
      },
      menuOptions: [],
      menuProps: {
        value: "id",
        label: "code",
        checkStrictly: true,
        emitPath: false,
      },
      disabledParentId: "",
      menuList: [],
      selection: [],
      currentNodeKey: [],
      id: "",
      menuTabs: "menu",
    };
  },
  mounted() {},
  methods: {
    //展开权限信息
    async open(id) {
      this.id = id;
      this.mode = "permission";
      this.drawerVisible = true;
      this.saveLoading = true;
      var params = { id: id };
      let res = await this.$API.rights.list.get();
      let res2 = await this.$API.rights.details.get(params);
      if (res.code == 0) {
        this.menuList = res.data;
        if (res2.code == 0) {
          this.$nextTick(() => {
            let provinceIds = [];
            let checked = res2.data;
            this.$refs.treeList.setCheckedKeys([]);
            for (let i = 0; i < checked.length; i++) {
              this.$refs.treeList.setChecked(checked[i].sjId, true, false);
            }
          });
        } else {
          let errdata = this.$TOOL.response(res2);
          this.$alert(
            this.$TOOL.json.get("", errdata, "message"),
            this.$TOOL.json.get("", errdata, "title"),
            {
              type: "error",
              confirmButtonText: "确定",
              dangerouslyUseHTMLString: true,
              showCancelButton: false,
            }
          )
            .then(() => {
              this.drawerVisible = false;
            })
            .catch(() => {});
        }
        this.saveLoading = false;
      } else {
        let errdata = this.$TOOL.response(res);
        this.$alert(
          this.$TOOL.json.get("", errdata, "message"),
          this.$TOOL.json.get("", errdata, "title"),
          {
            type: "error",
            confirmButtonText: "确定",
            dangerouslyUseHTMLString: true,
            showCancelButton: false,
          }
        )
          .then(() => {
            this.drawerVisible = false;
          })
          .catch(() => {});
      }
    },
    //提交
    async submit() {
      var checkedNodes = this.$refs.treeList.getCheckedNodes(false, true);
      var menusParams = [];
      for (let i = 0; i < checkedNodes.length; i++) {
        menusParams.push(checkedNodes[i].id);
      }

      let params = {
        userId: this.id,
        sjIdList: menusParams,
      };

      let res = await this.$API.rights.save.post(params);
      if (res.code == 0) {
        this.$message.success(this.tip);
        this.drawerVisible = false;
      } else {
        let errdata = this.$TOOL.response(res);
        this.$alert(
          this.$TOOL.json.get("", errdata, "message"),
          this.$TOOL.json.get("", errdata, "title"),
          {
            type: "error",
            confirmButtonText: "确定",
            dangerouslyUseHTMLString: true,
            showCancelButton: false,
          }
        );
      }
    },
    // 关闭页面
    close() {
      this.drawerVisible = false;
    },
    checkedKeys(nodeObj, SelectedObj) {
      // console.log(SelectedObj);
      // console.log(SelectedObj.checkedKeys); // 这是选中的节点的key数组
      // console.log(SelectedObj.checkedNodes); // 这是选中的节点数组

      this.selection = SelectedObj.checkedKeys;
    },
  },
};
</script>

<style>
</style>